<template>
  <view class="comment-page">
    <scroll-view 
      scroll-y 
      class="comment-list"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="comment-item" v-for="comment in commentList" :key="comment.id">
        <view class="comment-user">
          <image class="avatar" :src="comment.sysUser.avatar || '/static/avatars/default-avatar.jpg'" mode="aspectFill"></image>
          <view class="user-info">
            <text class="nickname">{{ comment.sysUser.nickName }}</text>
            <text class="time">{{ comment.createTime }}</text>
          </view>
        </view>
        <view class="comment-content">{{ comment.content }}</view>
        <view class="comment-actions">
          <text class="reply-btn" @tap="showReplyInput(comment)">回复</text>
        </view>
        
        <!-- 回复列表 -->
        <view class="reply-list" v-if="comment.children && comment.children.length > 0">
          <view class="reply-item" v-for="reply in comment.children" :key="reply.id">
            <text class="reply-user">{{ reply.sysUser.nickName }}</text>
            <text class="reply-content">{{ reply.content }}</text>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="loading-more" v-if="commentList.length > 0">
        <text v-if="hasMore">加载中...</text>
        <text v-else>没有更多了</text>
      </view>
    </scroll-view>
    
    <!-- 评论输入框 -->
    <view class="comment-input">
      <input 
        type="text" 
        v-model="commentContent" 
        :placeholder="replyTo ? `回复 ${replyTo.sysUser.nickName}` : '说点什么...'" 
        confirm-type="send"
        @confirm="submitComment"
      />
      <view v-if="replyTo" class="cancel-reply" @tap="cancelReply">取消</view>
      <button class="send-btn" @tap="submitComment">发送</button>
    </view>
  </view>
</template>

<script>
import { listComment, addComment } from '@/api/youqiu/comment'

export default {
  data() {
    return {
      commentList: [],
      commentContent: '',
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        activityId: '',
        parentId: null
      },
      hasMore: true,
      refreshing: false,
      replyTo: null
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.queryParams.activityId = options.id
      this.getCommentList()
    }
  },
  
  methods: {
    async getCommentList() {
      try {
        const res = await listComment(this.queryParams)
        if (res.code === 200) {
          const { rows, total } = res
          if (this.queryParams.pageNum === 1) {
            this.commentList = rows
          } else {
            this.commentList = [...this.commentList, ...rows]
          }
          this.hasMore = this.commentList.length < total
        }
      } catch (error) {
        console.error('获取评论列表失败:', error)
      }
    },
    
    async submitComment() {
      if (!this.commentContent.trim()) {
        uni.showToast({
          title: '请输入评论内容',
          icon: 'none'
        })
        return
      }
      
      try {
        const res = await addComment({
          activityId: this.queryParams.activityId,
          content: this.commentContent,
          parentId: this.replyTo ? this.replyTo.id : null
        })
        
        if (res.code === 200) {
          uni.showToast({
            title: this.replyTo ? '回复成功' : '评论成功',
            icon: 'success'
          })
          this.commentContent = ''
          this.replyTo = null
          this.queryParams.pageNum = 1
          this.getCommentList()
        }
      } catch (error) {
        console.error('发表评论失败:', error)
        uni.showToast({
          title: '发表失败',
          icon: 'none'
        })
      }
    },
    
    loadMore() {
      if (!this.hasMore) return
      this.queryParams.pageNum++
      this.getCommentList()
    },
    
    async onRefresh() {
      this.refreshing = true
      this.queryParams.pageNum = 1
      await this.getCommentList()
      this.refreshing = false
    },
    
    showReplyInput(comment) {
      this.replyTo = comment
    },
    
    cancelReply() {
      this.replyTo = null
      this.commentContent = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
  
  .comment-list {
    height: 100vh;
    padding: 20rpx;
    box-sizing: border-box;
    
    .comment-item {
      background: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      .comment-user {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        
        .avatar {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }
        
        .user-info {
          .nickname {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 4rpx;
          }
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
      
      .comment-content {
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
        margin-bottom: 16rpx;
      }
      
      .comment-actions {
        padding: 10rpx 0;
        
        .reply-btn {
          font-size: 26rpx;
          color: #666;
          padding: 10rpx 20rpx;
          
          &:active {
            opacity: 0.7;
          }
        }
      }
      
      .reply-list {
        background: #f5f5f5;
        padding: 20rpx;
        border-radius: 8rpx;
        
        .reply-item {
          font-size: 26rpx;
          margin-bottom: 12rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .reply-user {
            color: #666;
            margin-right: 10rpx;
          }
          
          .reply-content {
            color: #333;
          }
        }
      }
    }
  }
  
  .comment-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: #fff;
    border-top: 1rpx solid #eee;
    
    input {
      flex: 1;
      height: 72rpx;
      background: #f5f5f5;
      border-radius: 36rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      margin-right: 20rpx;
    }
    
    .send-btn {
      width: 120rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      background: #4CAF50;
      color: #fff;
      border-radius: 36rpx;
      font-size: 28rpx;
    }
    
    .cancel-reply {
      font-size: 28rpx;
      color: #666;
      padding: 0 20rpx;
      
      &:active {
        opacity: 0.7;
      }
    }
  }
  
  .loading-more {
    text-align: center;
    padding: 20rpx 0;
    font-size: 24rpx;
    color: #999;
  }
}
</style> 